<template>
  <div class="userSelector">
    <Modal
      title="用户选择"
      v-model="showModal"
      width="800"
      class-name="vertical-center-modal"
      footer-hide
    >
      <div style="min-height:200px;">
        <Form
          :model="formItem"
          :label-width="60"
          style="display:flex;flex-direction:row;align-items:center;flex-flow:wrap;height: 60px;"
          class="searchForm"
        >
          <FormItem label="手机号">
            <Input v-model="formItem.phone" placeholder="请输入手机号" style="width:150px"></Input>
          </FormItem>
          <FormItem>
            <Button type="primary" @click="queryCompany">搜索</Button>
          </FormItem>
        </Form>
        <Table
          :columns="userTh"
          :data="userList"
          stripe="false"
          style="max-height:400px;overflow-y:scroll;border:none"
          class="detailTable"
        ></Table>
        <div slot="footer">
          <Row type="flex" justify="center" align="middle">
            <Page
              :total="pageTotal*pageNum"
              :page-size="pageNum"
              @on-change="changePage"
              show-elevator
            />
          </Row>
        </div>
      </div>
    </Modal>
  </div>
</template>

<script>
import { UserSaasSelector } from "api/recuit/public";
export default {
  name: "userSelector",
  props: [],
  data() {
    return {
      formItem: {},
      userTh: [
        {
          title: "用户ID",
          key: "user_saas_id",
          align: "center",
          width: 100
        },
        {
          title: "头像",
          key: "message",
          width: 150,
          align: "center",
          render: (h, params) => {
            return h(
              "div",
              {
                style: {
                  display: "flex",
                  alignItems: "center",
                  justifyContent: "center"
                }
              },
              [
                h("img", {
                  attrs: {
                    src: params.row.worker_avatar
                  },
                  style: {
                    padding: "2px",
                    width: "40px",
                    height: "40px"
                  },
                  on: {
                    click: () => {
                      // this.show(params.index);
                    }
                  }
                })
              ]
            );
          }
        },
        {
          title: "用户手机号",
          key: "phone",
          width: 200,
          align: "center"
        },
        {
          title: "用户昵称",
          key: "worker_nickname",
          width: 200,
          align: "center"
        },
        {
          title: "操作",
          key: "action",
          width: 100,
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "middle"
                  },
                  on: {
                    click: () => {
                      this.confirmChoose(params.row);
                    }
                  }
                },
                "选中"
              )
            ]);
          }
        }
      ],
      userList: [],
      page: 0,
      pageNum: 10,
      showModal: false
    };
  },
  components: {},

  mounted() {
    this.queryCompany();
  },

  methods: {
    // 搜索用户
    queryCompany() {
      let formItem = JSON.parse(JSON.stringify(this.formItem));
      let page = this.page;
      let pageNum = this.pageNum;
      formItem.page = ++page
      formItem.pageNum = pageNum
      UserSaasSelector(formItem).then(result => {
        let { userSaasList, page } = result;
        userSaasList.unshift({
          user_saas_id: "0",
          phone: "不绑定用户"
        });
        this.userList = userSaasList;
        this.pageTotal = page.pageTotal;
      });
    },
    //切换页面
    changePage(page) {
      this.page = --page;
      this.queryCompany();
    },
    //选中用户
    confirmChoose(data) {
      this.$emit("confirmChooseFn", data);
    },
    //打开弹窗
    openModal(type) {
      this.showModal = type;
    }
  }
};
</script>

<style scoped lang="less">
</style>
